
<template>
	<view>
		
		<map class="map-view" id="map1" ref="map1" :show-location="false" :latitude="latitude" :longitude="longitude" :subkey="subkey" :markers="covers" scale="4">
			<view @click="to_my">返回</view>
		</map>		
		
		<!-- <ww-bottom-drawerapp ref="drag"  :proportionShow = 'proportionvc'  :dragHandleHeight = "handleHeight" :isExpand="mExpand"  @callExpand="onCallExpand" >
			<div style="height: 50rpx;position: relative;top: -80rpx;background-color: white;border-radius: 30rpx 30rpx 0 0;text-align: center;line-height: 70rpx;">诈骗发生地图</div>
			<slot> -->
	
				<!-- 填充内容 -->
				<!-- <swiper :indicator-dots="indicatorDots"  :autoplay="autoplay" :interval="interval" :duration="duration"
				 :circular="circular" style="height:100rpx" >
					<swiper-item>
						<view class="swiper-item uni-bg-red">A</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item uni-bg-blue">B</view>
					</swiper-item>
					<swiper-item>
						<view class="swiper-item uni-badge-purple">C</view>
					</swiper-item>
				</swiper> -->

				<!-- <view style="height: 300rpx;">
					<div style="text-align: center;top: -110;position: relative;line-height: 50rpx;">text-align: center;</div>
				<div>全国</div>
				</view> -->
				
				
				<!-- <ww-bottom-drawerapp :proportionShow='proportionvc' :dragHandleHeight="handleHeight">
				    <slot> -->
				        <!--填入你的抽屉View-->
				        <!-- <view style="height: 500rpx;">
				1
				<canvas canvas-id="HTHAAGTMMaRwrNLBVRhyisLIjhdKBfZT" id="HTHAAGTMMaRwrNLBVRhyisLIjhdKBfZT" class="charts" @touchend="tap"/>
				        </view>
				    </slot>
				</ww-bottom-drawerapp> -->
				
				
				
				<ww-bottom-drawerapp ref="drag" :proportionShow = 'proportionvc'  :dragHandleHeight = "handleHeight" :isExpand="mExpand"  @callExpand="onCallExpand" >
					<slot>
					
						<!-- 填充内容 -->
						<swiper :indicator-dots="indicatorDots"  :autoplay="autoplay" :interval="interval" :duration="duration"
						 :circular="circular" style="height:100rpx" >
							<swiper-item>
								<view class="swiper-item uni-bg-red">A</view>
							</swiper-item>
							<swiper-item>
								<view class="swiper-item uni-bg-blue">B</view>
							</swiper-item>
							<swiper-item>
								<view class="swiper-item uni-badge-purple">C</view>
							</swiper-item>
						</swiper>
						
						<uni-grid :column="4" :highlight="false" :showBorder="false" @change="onChange">
							<uni-grid-item v-for="(item, index) in 12" :index="index" :key="index">
								<view class="grid-item-box" style="background-color: #fff;">
									<uni-icons type="image" :size="30" color="#777" />
									<text class="text">文本信息</text>
								</view>
							</uni-grid-item>
						</uni-grid>
						<!-- end -->
					</slot>
				
				</ww-bottom-drawerapp>
				
				
				
				<!-- <uni-grid :column="4" :highlight="false" :showBorder="false" @change="onChange">
					<uni-grid-item v-for="(item, index) in 12" :index="index" :key="index">
						<view class="grid-item-box" style="background-color: #fff;">
							<uni-icons type="image" :size="30" color="#777" />
							<text class="text">文本信息</text>
						</view>
					</uni-grid-item>
				</uni-grid> -->
				<!-- end -->
			<!-- </slot> -->

		<!-- </ww-bottom-drawerapp> -->

	</view>
</template>

<script>
	// import ww-bottom-drawerapp from "@/uni_modules/ww-bottom-drawer/components/ww-bottom-drawerapp/ww-bottom-drawerapp.vue";
	// var components = {ww-bottom-drawerapp};
	import uCharts from '@/uni_modules/qiun-data-charts/js_sdk/u-charts/u-charts.js';
	var uChartsInstance = {}; 
	import QQmapsdk from '@/sdk/qqmap-wx-jssdk.js'
	var qqmapsdk;
	export default {
		data() {
			return {
				
				cWidth: 750,
				cHeight: 500,
				covers: [{
							  id:'1',
							  title:'123',
							  latitude: '30.909',
							  longitude: '110.39742',
							  iconPath:'../../static/bg.png',
								Width:50,
								height:40, 
								
				},
				{
							  id:'2',
							  title:'123',
							  latitude: '31.909',
							  longitude: '115.39742',
							  iconPath:'../../static/bg.png',
							  Width:30,
							  height:40,
							  color:'red'
				
				}],
				subkey:'SHGBZ-RIM6I-RTPGD-54ZAJ-Z6LRQ-Q7FGV',
				proportionvc:0.5,//抽屉初始显示的位置，内容的百分比
				handleHeight:50,//抽屉顶部边框高度，可以设置0，隐藏
				mExpand:false,
				title: 'Hello',
				latitude: '30',	
				longitude: '110',
				
				
				autoplay:true,
				interval:3000,
				duration:1000,
				indicatorDots:true,
				circular:true,
				
			}
		},
		onReady() {
		  //这里的 750 对应 css .charts 的 width
		  this.cWidth = uni.upx2px(400);
		  //这里的 500 对应 css .charts 的 height
		  this.cHeight = uni.upx2px(300);
		  this.getServerData();
		 
		  
		}, 
		mounted() {
			console.log("123")
			let qqMapWX = new QQmapsdk({
				key: 'SHGBZ-RIM6I-RTPGD-54ZAJ-Z6LRQ-Q7FGV'
			});
			uni.getLocation({
				type: 'wgs84',
				
				success: function (res) {
					console.log('当前位置的经度：' + res.longitude);
					console.log('当前位置的纬度：' + res.latitude);
					this.latitude=res.latitude;
					this.longitude=res.longitude;
				}
			});
		},
		onload(){
		
		},
		
		
		methods: {
			getServerData() {
			    //模拟从服务器获取数据时的延时
			    setTimeout(() => {
			      //模拟服务器返回数据，如果数据格式和标准格式不同，需自行按下面的格式拼接
			      let res = {
			          series: [
			            {
			              data: [{"name":"浙江","value":50},{"name":"上海","value":30},{"name":"江苏","value":20},{"name":"北京","value":18,"labelText":"北京:18人"},{"name":"广州","value":8}]
			            }
			          ]
			        };
			      this.drawCharts('HTHAAGTMMaRwrNLBVRhyisLIjhdKBfZT', res);
			    }, 500);
			  },
			  drawCharts(id,data){
			    const ctx = uni.createCanvasContext(id, this);
			    uChartsInstance[id] = new uCharts({
			      type: "pie",
			      context: ctx,
			      width: this.cWidth,
			      height: this.cHeight,
			      series: data.series,
			      animation: true,
			      background: "#FFFFFF",
			      color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
			      padding: [5,5,5,5],
			      extra: {
			        pie: {
			          activeOpacity: 0.5,
			          activeRadius: 10,
			          offsetAngle: 0,
			          labelWidth: 15,
			          border: true,
			          borderWidth: 3,
			          borderColor: "#FFFFFF"
			        }
			      }
			    });
			  },
			  tap(e){
			    uChartsInstance[e.target.id].touchLegend(e);
			    uChartsInstance[e.target.id].showToolTip(e);
			  },
			
			
			to_my(){
				uni.switchTab({
					url:"../pages/my/my"
				})
			},
			onChange(e) {
				let {
					index
				} = e.detail;
		       console.error(index);
				uni.showToast({
					title: `你点击了${index}`
				})
			},
			showApp(){
				uni.navigateTo({
					url:'app-map'
				})
			},
			onCallExpand(e) { //展开搜索的回调监听
			    
			   this.mExpand = e.value
			  
			   
			},
		},
		}
	
	
</script>

<style>
	page{
		background-color: #f3f3f3;
	}
	.map-view {
		display: flex;
		width: 100vw;
		height: 100vh;
	}
	
	.grid-item-box {
		flex: 1;
		// position: relative;
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 15px 0;
	}
	
	.text {
		font-size: 26rpx;
		margin-top: 10rpx;
	}
	.swiper-item{
		   height: 100rpx;
		   display: block;
		   line-height: 100rpx;
		   text-align: center;
	}
	.charts{
		/* transform: scale(0.5);
		
		
		left: -170rpx; */
	  width: 750rpx;
	  height: 500rpx;
	}
</style>
